<template>
    <div>
        <el-card>
            <div class="mod-class">
                <el-form :inline="true">
                    <el-form-item>
                        <el-input v-model="courseName" placeholder="请输入课程名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="getDataList()">搜索
                        </el-button>
                    </el-form-item>

                </el-form>

                <el-table :data="courses" border v-loading="dataListLoading" style="width: 100%  ">


                    <el-table-column prop="courseName" header-align="center" align="center" min-width="100"
                        label="课程名称">
                    </el-table-column>
                    <el-table-column prop="teacherId" header-align="center" align="center" min-width="100" label="教师工号">
                    </el-table-column>
                    <el-table-column prop="teacherName" header-align="center" align="center" min-width="100" label="教师">
                    </el-table-column>
                    <el-table-column prop="type" header-align="center" align="center" min-width="100" label="课程类型">
                    </el-table-column>


                    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="arrangescores(scope.row)">成绩登记
                            </el-button>


                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                    :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
                <!-- 弹窗, 新增 / 修改 -->
              <stu ></stu>

            </div>
            </el-card>

    </div>



</template>

<script>
    import { curriculumApi } from '@/api/course';
    import stu from './stu';


    export default {
        data() {
            return {

                dataListLoading: false,
                stuVisible: false,
                courseListVisible: false,
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                courseName: '',
                classYear: '',
                courses: []
            }
        },
        components: {
          stu
        },
        mounted() {
            this.getDataList()
        }, computed: {

        },
        methods: {
            getDataList() {
                this.stuVisible = false
                let params = { limit: this.pageSize, page: this.pageIndex, courseName: this.courseName }
                curriculumApi.getmycourse(params).then(({ data }) => {
                    this.courses = data.list
                    this.pageSize = data.pageSize
                    this.totalPage = data.totalCount
                })
            },
            beforeTabLeave(ac) {


                let p = new Promise((resolve, reject) => {
                    if (ac == 'stu') {
                        if (this.activeName == "stu") {
                            this.stuVisible = true
                            this.courseListVisible = false
                            resolve()
                        } else {
                            reject()
                        }
                    } else if (ac == "list") {
                        this.stuVisible = false
                        this.courseListVisible = true
                    } else {
                        this.stuVisible = false
                        this.courseListVisible = false
                    }

                    resolve()
                })
                return p

                //     if (this.activeName == 'class' && ac == 'curriculum') {
                //         reject()
                //     }

                //     resolve()
                // })
                // return p
            },
            searchClass() {
                this.getDataList()
            },
            arrangescores(course) {
                console.log(course);
                this.activeName = 'stu'
                this.stuVisible = true
                console.log(this.$refs.stu)
                this.$nextTick(() => {
                    this.$refs.stu.init(course.courseId, course.teacherId)
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },

            deleteHandle(id, code) {

                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.classId
                })
                this.$confirm(`确定对[${code}]进行[课表清空]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    curriculumApi.clear(ids).then(() => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList()
                            }
                        })

                    })
                })
                    .catch(() => {

                    })
            }
        }
    }
</script>

<style>
    .mod-class {
        text-align: center;
    }
</style>
